<script setup>
import { onBeforeUnmount, onMounted, reactive, ref, computed } from 'vue';
import { storeToRefs } from "pinia";
import { useRoute, useRouter } from "vue-router";
import authService from "@/services/auth.service";
import useAuthStore from "@/stores/auth";
import TabbarWrapper from '@/components/TabbarWrapper.vue';

const router = useRouter();
const route = useRoute();
const authStore = useAuthStore();
const { userProfile } = storeToRefs(authStore);
const currentUser = computed(() => userProfile?.value?.user);

const load = async () => {
    if (!currentUser.value) {
        router.push("/login");
    }
};

onMounted(() => {
    load();
});

</script>
<template>
    <div class="page-container absolute left-0 top-0 w-full h-full flex flex-col">
        <div class="header-container">
            <VanNavBar title="我的"></VanNavBar>
        </div>

        <div class="main-container flex-grow">
            <div class="h-[100px] flex flex-row p-3 m-2 bg-[#ff5454] rounded-[6px]" v-if="currentUser">
                <div class="">
                    <van-image width="64px" height="64px" round :src="currentUser.avatar" />
                </div>
                <div class="h-full flex-grow flex flex-col pl-2 justify-start">
                    <div>{{ currentUser.nickname }}</div>
                    <div>{{ currentUser.description }}</div>
                </div>
            </div>
            <VanCellGroup>
                <VanCell title="账号管理" is-link to="/profile"></VanCell>
            </VanCellGroup>
        </div>

        <div class="footer-container">
            <TabbarWrapper active-tab="mine"></TabbarWrapper>
        </div>
    </div>
</template>